<script setup lang="ts">
import {OrderApi} from "@/api/cloud/order.ts";
import {h, onMounted, reactive, ref} from "vue";
import {useI18n} from "vue-i18n";
import type {DataTableColumns, DataTableRowKey} from 'naive-ui'
import {cloud} from "@/api/dto";

let composer = useI18n();
const PageResult = ref<cloud.Order[]>([])
const paginationReactive = reactive({
    page: 1,
    pageSize: 20,
    showSizePicker: true,
    pageSizes: [10, 20, 50],
    onChange: (page: number) => {
        paginationReactive.page = page
    },
    onUpdatePageSize: (pageSize: number) => {
        paginationReactive.pageSize = pageSize
        paginationReactive.page = 1
    }
})
onMounted(() => {
    OrderApi.OrderSearch({
        pageInfo: paginationReactive,
        data: {
            ...cloud.DefaultValue.Order
        }
    }).then(resp => {
        console.log("resp", resp)
        PageResult.value = resp.data.items
    })
})


const columns: DataTableColumns<cloud.Order> = [...[
    {
        type: "selection",
        multiple: true,
        disabled(row: cloud.Order) {
            return row.number == "Edward King 3"
        }
    },
    {title: composer.t("module.order.number"), key: "number",},
    {
        title: composer.t("module.order.state"), key: "state",
        render: (data: cloud.Order, index: number) => {
            console.log("data", data)
            return h('span', {style: {color: 'red'}}, data.state == undefined || data.state == 0 ? "Finish" : "Cancel")
        }
    },
    {title: composer.t("module.order.price"), key: "price"},
    {title: composer.t("module.order.pay"), key: "pay"},
    {title: composer.t("module.order.note"), key: "note", resizable: true,},
    {
        title: composer.t("common.updated_at"), key: "updated_at", width: 100, ellipsis: {
            tooltip: true
        }, resizable: true
    },
]]

const checkedRowKeysRef = ref<DataTableRowKey[]>([])
const handleCheck = (rowKeys: DataTableRowKey[]) => {
    console.log(rowKeys)
    checkedRowKeysRef.value = rowKeys
}
const rowKey = (row: cloud.Order) => row.id
</script>
<template lang="pug">
.as
    n-data-table(:data="PageResult"
        size="small"
        :columns="columns"
        :pagination="paginationReactive"
        @update:checked-row-keys="handleCheck"
        striped
        :bordered="false"
        :row-key="rowKey"
    )
    p {{checkedRowKeysRef}}

</template>
<style scoped lang="scss">
tr {
    background: #cd9d9d;
}

td {
    padding: 10px;
    border: gray 1px solid;
    text-align: center;
    width: 20%;
}

.btn {
    width: 100%;
    height: 100%;
    background: transparent;
}
</style>